<template>
<div class="user">
   <el-row>
      <span>{{ msg }}</span>
    </el-row>
    <el-row class="buttonBar">
      <el-button type="success" @click="reflushHandler()">{{ reflus_btn }}</el-button>
    </el-row>
    <el-row>
        <el-table
            :data="userdata"
            style="width: 100%"
            height="580"
            v-loading="loading"
            stripe
            border
            >
            <el-table-column
              fixed
              prop="name"
              label="用户名"
              width="250">
            </el-table-column>
            <el-table-column
              prop="createtime"
              label="创建时间"
              width="200">
            </el-table-column>
            <el-table-column
              prop="realname"
              label="真实姓名"
              width="300">
            </el-table-column>
            <el-table-column
              prop="score"
              label="积分"
              width="150">
            </el-table-column>
            <el-table-column
              prop="telphone"
              label="联系电话"
              width="150">
            </el-table-column>
            <el-table-column
              prop="bankcard"
              label="银行卡号"
              width="150">
            </el-table-column>
            <el-table-column
              label="照片"
              width="150">
                <template slot-scope="scope">
                    <el-popover
                    placement = "bottom"
                    trigger="hover"
                    width="250"
                    height="150">
                    <div style="text-align: right; margin: 0">
                        <img v-bind:src="scope.row.picture" width="250" height="150"/>
                    </div>
                       <img slot="reference" v-bind:src="scope.row.picture" width="40" height="40"/>
                    </el-popover>
                </template>
            </el-table-column>
          </el-table>
    </el-row>
     <el-row  class="pageBar">
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="pagesize"
        layout="prev, pager, next, jumper"
         :total="count">
      </el-pagination>
    </el-row>
</div>
</template>
<script>
export default {
    created() {
        this.queryUserdatalist((this.currentPage - 1) * this.pagesize, this.pagesize);
    },
    name: "user",
    data() {
        return {
            currentPage: 1,
            pagesize: 10,
            reflus_btn: "刷新数据",
            msg: "用户列表",
            admin: this.$persistence.get("admin"),
            userdata: [],
            count: 0,
            loading: false
        };
    },
    methods: {
        reflushHandler() {
            this.queryUserdatalist((this.currentPage - 1) * this.pagesize, this.pagesize);
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.currentPage = val;
            this.queryUserdatalist((this.currentPage - 1) * this.pagesize, this.pagesize);
        },
        handleEdit(index, row) {
            console.log(index, row);
        },
        handleDelete(index, row) {
            if (index !== -1) {
                this.userdata.splice(index, 1);
            }
        },
        queryUserdatalist(skip, take) {
            this.$axiosPost(
                "/AdminService/findUser",
                {
                    session: this.admin.session,
                    opts: {
                        skip: skip,
                        take: take
                    }
                },
                response => {
                    this.count = response.data.count;
                    this.userdata = this.formatUserdatalist(response.data.list);
                    this.loading = false;
                },
                error => {
                    this.loading = false;
                }
            );
        },
        formatUserdatalist(list) {
            let userlist = [];
            for (let index = 0; index < list.length; index++) {
                const element = list[index];
                userlist.push({
                    id: element.id,
                    name: element.username,
                    realname: element.nickname,
                    telphone: element.phone,
                    picture: element.photo,
                    bankcard: element.idcard
                });
            }
            return userlist;
        }
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
body {
    margin: 0;
}
span {
    font-weight: normal;
}
.buttonBar {
    margin-bottom: 10px;
    text-align: right;
}
.pageBar {
    margin-top: 10px;
    text-align: center;
}
</style>